import React from 'react';
import styles from './style.css'
import Cookie from 'js-cookie'


import Map from 'lodash.map'
import MyLayout from "../layout";
import {uuid} from "../../util/uitls";

class Home extends React.Component {
    constructor(props) {
        super()
        this.state = {
            hasMore: true,
            autoLoadMore: false,
            headStylesTop: 97,
            array: [1],
            user: {
                userImage: ""
            }
        }
    }

    componentDidMount() {
        var self = this
        var swiper = new Swiper(self.swiper, {
            slidesPerView: 'auto',
            spaceBetween: 40,
        });
    }


    render() {
        return <MyLayout>
            <div className={styles.Home}>
                <div className={styles.h1}>Featured</div>
                <div className={`${styles['swiper-container']} swiper-container`} ref={node => this.swiper = node}>
                    <div className="swiper-wrapper">
                        {
                            Map([1, 2, 3, 4], item => {
                                return <div className={`${styles['swiper-slide']} swiper-slide`} key={uuid()}>
                                    <div className={styles.wraooerImage}>
                                        <img src="/static/Group2.png" alt=""/>
                                    </div>
                                    <div className={styles.desc}>
                                        Business
                                        Management
                                    </div>
                                    <div className={styles.h3}>
                                        $19.99
                                    </div>
                                </div>
                            })
                        }
                        <div className={`${styles['swiper-slide']} swiper-slide ${styles['swiper-slide-laset']}`}
                             key={uuid()}>
                        </div>
                    </div>
                </div>

                <div>
                    <div className={styles.h1}>Categories</div>
                    <div className={styles.row11}>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                        <div className={styles.item}>
                            <div className={styles.wrapperImage11}>
                                <img src="/static/Badge.png" alt=""/>
                            </div>
                            <div className={styles.itemTitlte}>
                                Business
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </MyLayout>
    }
}

export default Home